<template>
	<!-- 任务列表 -->
	<view class="page">
		<uv-navbar title="检查记录" auto-back placeholder />
		<view class="list ss-r-20 ss-shadow">
			<view class="ss-grey-2 ss-w-100 ss-font-28">
				<view class="list_tit ss-flex ss-p-x-36 ss-p-y-26">
					<view class="des">检测项目</view>
					<view class="ss-m-x-20 ss-black ss-flex-1">{{ state.name || "-" }}</view>
				</view>
				<view class="ss-flex ss-p-x-36 ss-col-top ss-p-y-26 req">
					<view class="des">测试方法和要求</view>
					<view class="ss-m-x-20 ss-black ss-flex-1">
						{{ state.specification || "-" }}
					</view>
				</view>
			</view>
			<view class="ss-p-26 ss-bg-w ss-font-28">
				<view class="ss-flex ss-col-center ss-m-y-10">
					<view class="tabCard_l"></view>
					<view class="ss-m-x-10 ss-black">基本信息</view>
				</view>
				<view class="ss-grey-2 ss-m-x-6 ss-m-y-16">
					<view class="ss-m-y-16"> 检查数量 </view>
					<uv-input placeholder="输入数量" border="surround" disabled="true" type="number"
						v-model="checkDetails.inspectCount" />
				</view>
				<view class="ss-grey-2 ss-m-x-6 ss-m-y-16">
					<view class="ss-m-y-16"> 问题描述 </view>
					<uv-textarea disabled="true" v-if="checkDetails.problemDescription"
						v-model="checkDetails.problemDescription" placeholder="-" />
				</view>
				<view class="ss-grey-2 ss-m-x-6 ss-m-y-16">
					<view class="ss-m-y-16"> 位置描述 </view>
					<uv-input placeholder="请填写位置描述" border="surround" disabled="true"
						v-model="checkDetails.locationDescription" />
				</view>
				<view class="ss-flex ss-col-center ss-m-y-10">
					<view class="tabCard_l"></view>
					<view class="ss-m-x-10 ss-black ss-flex ss-col-center">
						<view class="">
							检查结果 ：
						</view>
						<view class="" :style="{color:resList[0].name == '合格'?'#000':'red'}">
							{{ resList[0].name}}
						</view>
					</view>
				</view>
				<!-- <view class="ss-flex ss-col-center ss-m-y-10">
          <view v-for="(item, index) in resList" :key="index" class="radioBox">
            {{ item.name }}
          </view>
        </view> -->
				<view class="ss-grey-2 ss-m-x-6 ss-m-y-16">
					<view class="ss-m-y-16"> 备注 </view>
					<uv-textarea v-model="checkDetails.remark" disabled="true" />
				</view>
				<view class="ss-grey-2 ss-m-x-6 ss-m-y-16">
					<view class="ss-m-y-16">照片 </view>
					<view class="img_box">
						<image v-for="(item, index) in checkDetails.imgUrl" :key="index" :src="webSrc(item)"
							@click="previewImage(item)" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		tasksItem
	} from "@/request/task.js";
	import {
		webSrc
	} from "@/common/mothed.js";

	const checkDetails = ref({
		inspectCount: "",
		problemDescription: "",
		locationDescription: "",
		remark: "",
		status: "",
		imgUrl: "",
	});

	const resList = ref([{
			id: 1,
			name: "合格",
		},
		{
			id: 2,
			name: "不合格",
		},
	]);

	const state = reactive({
		specification: "",
		name: "",
		recordId: "",
	});

	onLoad((e) => {
		state.recordId = e.recordId;
		state.name = e.name;
		state.specification = e.specification;
		getDetails();
	});

	// 预览图片
	const previewImage = (url) => {
		uni.previewImage({
			urls: [webSrc(url)],
			current: webSrc(url),
		});
	};

	// 获取常见问题列表
	const getDetails = () => {
		tasksItem(state.recordId).then((res) => {
			checkDetails.value = res.data;
			checkDetails.value.imgUrl = res.data.imgUrl.split(",");
			resList.value = resList.value.filter((item) => item.id == checkDetails.value.status);
		});
	};
</script>
<style lang="scss" scoped>
	@import "@/uni.scss";

	.page {
		padding: 30rpx;
	}

	.img_box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		width: 630rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 200rpx;
		}
	}

	.list {
		width: 100%;

		.req {
			max-height: 340rpx;
			overflow-y: auto;
		}

		.list_tit {
			border-bottom: 2rpx solid gainsboro;
		}

		.des {
			width: 140rpx;
			text-align: center;
		}

		.radioBox {
			box-shadow: 0 0 0 2rpx rgb(0, 0, 0, 0.2);
			padding: 20rpx;
			text-align: center;
			width: 420rpx;
			height: 30rpx;
			line-height: 30rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 10rpx;
		}
	}
</style>